<template>
  <div>

      <ul class="coupon" v-if=" objtype == '1' ">


          <li  v-for=" (i, item) in items "  v-bind:class="{ 'on': item.sed   }"  @click="pick(item,i)" >
              <div class="tag">
                  <strong>{{item.reward_money}}元</strong>
                  <span>新手红包</span>
              </div>

              <div class="info">
                  <p>投标期限:适用于{{item.min_period}}至{{item.max_period}}个月项目</p>
                  <p>适用条件:满{{item.tender_money}}元可用</p>
                  <p>到期时间:{{item.end_time_str}}</p>
              </div>
              <div class="btn" >
                <div class="circle " >
                  <i class="iconfont"  >&#xe64b;</i>
                </div>
              </div>
              <!-- <div class="exired"  ></div> -->
          </li>



      </ul>

      <ul class="coupon" v-if=" objtype == '2' " >
          <li  v-for=" (i, item) in items "  v-bind:class="{ 'on': item.type == 1  }" >
              <div class="tag">
                  <strong>{{item.money}}元</strong>
                  <span>新手红包</span>
              </div>

              <div class="info">
                  <p>投标期限:适用于{{item.min_period}}至{{item.max_period}}个月项目</p>
                  <p>适用条件:满{{item.tender_money}}元可用</p>
                  <p>到期时间:{{item.end_time_str}}</p>
              </div>
              <div class="icon used" v-if=" item.type == 2 " ></div>
              <div class="icon exired" v-if=" item.type == 3   " ></div>

              <!-- <div class="btn"  v-if=" item.status == '0' " @click="goInvest">
                  <input type="button" class="m_btn_nob" value="使用" />
              </div> -->

          </li>
      </ul>

      <div class="nodata" v-if=" objtype == '2' && (items.length == 0 || items.length == ''  || items == null || items == undefined ) " >
          没有数据!
      </div>

    </div>
</template>

<script>
import { CheckIcon, XIcon } from "vux";
import {  mapGetters, mapActions } from 'vuex'

export default {
  name: "common-dialog",
  props: {
    objtype:{
        type: String,
        "default": "1"
    },
    items: []
  },

  computed: {
		...mapGetters(['redPackStr'])
	},



  data() {
    return {
      demo1: false,
      demo2: true
    };
  },

  methods: {

		...mapActions([
      'setRedPack'
    ]),

    goInvest(){
      this.$route.router.go('/invest/index?productype=current');
    },

    pick(obj, key){
      /* if(obj.sed)
        obj.sed = false;
      else
        obj.sed = true; */

      if(this.items[key].sed)
        this.items[key].sed = false;
      else
        this.items[key].sed = true;

      this.setcheck();
    },

    setcheck(){
      var checkID = '', reward_money = 0, tender_money = 0;

      for(var i=0; i<this.items.length;i++){




        if(this.items[i].sed == true){

          reward_money = reward_money + parseInt(this.items[i].reward_money);
          tender_money = tender_money + parseInt(this.items[i].tender_money);

          console.log(this.items[i])
          if(checkID=="")
            checkID = this.items[i].id;
          else
            checkID = checkID+'|'+this.items[i].id;
        }
      }


      this.setRedPack( {id:checkID, tender:tender_money, reward:reward_money} )
    }
  },
  components: {
    XIcon,
    CheckIcon
  }/* ,

	ready(){
    console.log('ready')
    this.setcheck();
	},
  created(){

    console.log('created')
    if(this.items){

      for(var i=0; i<this.items.length;i++){

          if(this.items[i].sed == '1'){
            this.items[i].sed = true
          }

          if(this.items[i].sed == '0' ){
            this.items[i].sed = false
          }
      }

    }

  } */
};
</script>

<style lang="scss" scoped>


.coupon li {


  font-size: 0;
  background: radial-gradient(transparent 0, transparent 4px, #999 5px);
  background-size: 15px 15px;
  background-position: 9px 3px;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;

  .icon {
    background-size: 100%;
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    position: absolute;
    right: -15px;
    z-index: 88;
    top: -13px;
  }

  .used {
    background-image: url("../assets/images/used.png");
  }

  .exired {
    background-image: url("../assets/images/expired.png");
  }

  &.on .tag strong {
    color: #ff5722;
  }
  .tag strong {
    font-size: 20px;
    display: block;
    color: #999;
  }
  .tag span {
    font-size: 15px;
  }

  &.on {
    background: radial-gradient(transparent 0, transparent 4px, #ff6666 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;

    .circle {
      border: 1px solid #ff5722;
    }

    .iconfont {
      color: #ff5722;
    }
  }
  &:before {
    background-color: #fff;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    right: 0px;
    z-index: 0;
  }
  .tag,
  .btn,
  .info {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
  }
  .tag {
    width: 30%;
    text-align: center;
    position: relative;
    padding: 10px 0px;
    border-right: 1px solid #e0e0e0;
    margin-right: 10px;
  }
  .btn {
    width: 10%;
  }
  .info {
    width: 50%;
    position: relative;
  }
  .btn {
    position: relative;
    text-align: center;

  }

  .iconfont {
    font-size: 16px;
    color: #8a8a8a;
    margin-top: 3px;
    display: inline-block;
  }

  .circle {
    border: 1px solid #999;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    z-index: 80;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translate(0%, -50%);


  }

  .m_btn_nob{
    padding: 4px 10px;
    font-size:13px;
  }
}
</style>
